<template>
  <!-- 企业信息管理 -->
  <div class="deptInfoPoint">
    <basic-container>
      <avue-form ref="form"
                 :option="option"
                 v-model="form"
                 @submit="handleSubmit">

        <!-- 地图表单自定义 -->
        <template slot="deptMap">
          <div v-if="deptShowMap">
            <baidu-map class="map" :center="center" :zoom="zoom" @ready="deptInfoHandler">
              <el-input placeholder="关键词查询" v-model="searchWord" style="position:absolute;top:10px;left:10px;width:180px;">
                <template slot="append">
                  <el-button icon="el-icon-search" id="citySearch"></el-button>
                </template>
              </el-input>
              <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
              <bm-marker :position="mapPosition" :dragging="true"></bm-marker>
            </baidu-map>
          </div>
        </template>

        <!-- 企业平面图表单自定义 -->
        <template slot="qypmt">
          <div>
            <el-button type="primary" size="small" @click="uploadQYPMT">上传图片</el-button>
            <span style="margin-left: 10px; color: #606266; font-size: 12px;">只能上传图片，最多选择3张</span>
            <input accept="image/*" ref="qypmtUpload" id="qypmtUpload" style="display: none;" type="file" @change="qypmtUpload" multiple />
          </div>
        </template>

        <!-- 企业平面图内容表单自定义 -->
        <template slot="qypmtContent">
          <div class="xczp_content">
            <el-tag v-for="(item, index) in qypmtFileList" :key="index" type="info" :closable=true @close="handleRemoveQYPMT(index)">
              <img :src="item.response.data.fileUrl" @click="previewQYPMT(item)" alt />
            </el-tag>
          </div>
        </template>

        <!-- 营业执照图表单自定义 -->
        <template slot="qyyyzz">
          <div>
            <el-button size="small" type="primary" @click="uploadQYYYZZ">上传图片</el-button>
            <span style="margin-left: 10px; color: #606266; font-size: 12px;">只能上传图片，最多选择3张</span>
            <input accept="image/*" ref="qyyyzzUpload" id="qyyyzzUpload" style="display: none;" type="file" @change="qyyyzzUpload" multiple />
          </div>
        </template>

        <!-- 营业执照图内容表单自定义 -->
        <template slot="qyyyzzContent">
          <div class="xczp_content">
            <el-tag v-for="(item, index) in qyyyzzFileList" :key="index" type="info" :closable=true @close="handleRemoveQYYYZZ(index)">
              <img :src="item.response.data.fileUrl" @click="previewQYYYZZ(item)" alt />
            </el-tag>
          </div>
        </template>

        <!-- 大门照片表单自定义 -->
        <template slot="qyzp">
          <div>
            <el-button size="small" type="primary" @click="uploadQYZP">上传图片</el-button>
            <span style="margin-left: 10px; color: #606266; font-size: 12px;">只能上传图片，最多选择3张</span>
            <input accept="image/*" ref="qyzpUpload" id="qyzpUpload" style="display: none;" type="file" @change="qyzpUpload" multiple />
          </div>
        </template>

        <!-- 大门照片内容表单自定义 -->
        <template slot="qyzpContent">
          <div class="xczp_content">
            <el-tag v-for="(item, index) in qyzpFileList" :key="index" type="info" :closable=true @close="handleRemoveQYZP(index)">
              <img :src="item.response.data.fileUrl" @click="previewQYZP(item)" alt />
            </el-tag>
          </div>
        </template>

      </avue-form>

      <!-- 图片弹窗 -->
      <template>
        <div>
          <el-dialog title="现场图片" append-to-body :visible.sync="localPicBox" :close-on-click-modal="false" :before-close="handleClosePicBox" width="50%">
            <el-carousel indicator-position="outside" trigger="click" :autoplay="false">
              <el-carousel-item v-for="item in imgList" :key="item.id">
                <img :src="item.url" alt />
              </el-carousel-item>
            </el-carousel>
            <div class="view_picture_footer">
              <el-button type="primary" size="small" @click="confirmViewPicture()">确 认</el-button>
            </div>
          </el-dialog>
        </div>
      </template>

    </basic-container>
  </div>
</template>

<script>
  import {validateDigit, validateDigitEnglish, validatePostalCode, validateTelephone, validateEmail, validateIsQQ, validateUnitFax, validateDigitPoint} from "@/api/mmhi/validate";
  import {getCurrentDeptInfo, submit, getPictures} from "@/api/basedata/dept_info";
  import {uploadFiles} from "@/api/mmhi/prod_plant";

  export default {
    props: {
      localPicBox: {default: false},
      localPictures: {default: []}
    },
    data() {
      return {
        form: {},
        imgList: [],
        option: {
          labelWidth: 100,
          group: [
            {
              label: '企业信息',
              prop: 'deptInfo',
              icon: 'el-icon-s-order',
              column: [
                {
                  label: "企业名称",
                  prop: "qymc",
                  align: "center",
                  maxlength:150,
                  span: 24,
                  row: true,
                  rules: [{
                    required: true,
                    message: "请输入企业名称",
                    trigger: "blur"
                  }]
                }, {
                  label: "企业ID",
                  prop: "qyid",
                  align: "center",
                  maxlength:11,
                  rules: [{
                    required: true,
                    validator: validateDigitEnglish,
                    trigger: "blur"
                  }],
                }, {
                  label: "统一社会信用代码",
                  prop: "tyshxydm",
                  align: "center",
                  maxlength:18,
                  rules: [{
                    required: true,
                    validator: validateDigitEnglish,
                    trigger: "blur"
                  }],
                },
                {
                  label: '行政区划',
                  prop: 'szs1',
                  align: "center",
                  type: 'select',
                  cascaderIndex:0,
                  props: {
                    label: 'name',
                    value: 'code'
                  },
                  cascaderItem: ['szs2', 'szx', 'szxz'],
                  dicUrl: "/api/deptInfoManage/bladeDeptInfo/getXzqhList?code={{key}}",
                  span: 6,
                  rules: [{
                    required: true,
                    message: "请选择省份",
                    trigger: "blur"
                  }]
                },
                {
                  label: '',
                  prop: 'szs2',
                  align: "center",
                  type: 'select',
                  cascaderIndex:0,
                  props: {
                    label: 'name',
                    value: 'code'
                  },
                  dicFlag: false,
                  dicUrl: "/api/deptInfoManage/bladeDeptInfo/getXzqhList?code={{key}}",
                  span: 6,
                  rules: [{
                    required: true,
                    message: "请选择市级",
                    trigger: "blur"
                  }]
                },
                {
                  label: '',
                  prop: 'szx',
                  align: "center",
                  type: 'select',
                  cascaderIndex:0,
                  props: {
                    label: 'name',
                    value: 'code'
                  },
                  dicFlag: false,
                  dicUrl: "/api/deptInfoManage/bladeDeptInfo/getXzqhList?code={{key}}",
                  span: 6,
                  rules: [{
                    required: true,
                    message: "请选择区县",
                    trigger: "blur"
                  }]
                },
                {
                  label: '',
                  prop: 'szxz',
                  align: "center",
                  type: 'select',
                  cascaderIndex:0,
                  props: {
                    label: 'name',
                    value: 'code'
                  },
                  dicFlag: false,
                  dicUrl: "/api/deptInfoManage/bladeDeptInfo/getXzqhList?code={{key}}",
                  span: 6,
                  rules: [{
                    required: false,
                    message: "请选择乡镇",
                    trigger: "blur"
                  }]
                },
                {
                  label: "所在村（社区）",
                  prop: "szc",
                  align: "center",
                  maxlength:50,
                  rules: [{
                    required: false,
                    message: "请输入所在村（社区）",
                    trigger: "blur"
                  }],
                },
                {
                  label: "所在园区（开发区）",
                  prop: "szyq",
                  align: "center",
                  maxlength:50,
                  rules: [{
                    required: false,
                    message: "请输入所在园区（开发区）",
                    trigger: "blur"
                  }],
                },
                {
                  label: "工商注册地址",
                  prop: "gszcdz",
                  align: "center",
                  maxlength:150,
                  span: 24,
                  rules: [{
                    required: true,
                    message: "请输入工商注册地址",
                    trigger: "blur"
                  }],
                },
                {
                  label: "生产经营地址",
                  prop: "scjydz",
                  align: "center",
                  maxlength:150,
                  span: 24,
                  rules: [{
                    required: true,
                    message: "请输入生产经营地址",
                    trigger: "blur"
                  }],
                },
                {
                  label: "邮政编码",
                  prop: "yzbm",
                  align: "center",
                  maxlength:6,
                  rules: [{
                    required: true,
                    validator: validatePostalCode,
                    trigger: "blur"
                  }],
                },
                {
                  label: "成立日期",
                  prop: "clrq",
                  align: "center",
                  type: "date",
                  format: "yyyy-MM-dd",
                  valueFormat: "yyyy-MM-dd",
                  rules: [{
                    required: true,
                    message: "请输入成立日期",
                    trigger: "click"
                  }]
                },
                {
                  label: "法人代表",
                  prop: "fddbr",
                  align: "center",
                  maxlength:150,
                  rules: [{
                    required: true,
                    message: "请输入法人代表",
                    trigger: "blur"
                  }],
                },
                {
                  label: "企业固定电话",
                  prop: "qygddh",
                  align: "center",
                  maxlength:13,
                  rules: [{
                    required: true,
                    validator: validateTelephone,
                    trigger: "blur"
                  }],
                },
                {
                  label: "安全值班电话",
                  prop: "aqzbdh",
                  align: "center",
                  maxlength:13,
                  rules: [{
                    required: true,
                    validator: validateTelephone,
                    trigger: "blur"
                  }],
                },
                {
                  label: "电子邮箱",
                  prop: "dzyx",
                  align: "center",
                  maxlength:50,
                  rules: [{
                    required: true,
                    validator: validateEmail,
                    trigger: "blur"
                  }],
                },
                {
                  label: "联系QQ号",
                  prop: "lxqqh",
                  align: "center",
                  maxlength:50,
                  rules: [{
                    required: false,
                    validator: validateIsQQ,
                    trigger: "blur"
                  }],
                },
                {
                  label: "单位传真",
                  prop: "dwcz",
                  align: "center",
                  maxlength:50,
                  rules: [{
                    required: false,
                    validator: validateUnitFax,
                    trigger: "blur"
                  }],
                },
                {
                  label: "官方网站地址",
                  prop: "gfwzdz",
                  align: "center",
                  maxlength:50,
                  span: 24,
                  rules: [{
                    required: false,
                    message: "请输入官方网站地址",
                    trigger: "blur"
                  }],
                },
                {
                  label: "主要负责人",
                  prop: "zyfzr",
                  align: "center",
                  maxlength:50,
                  rules: [{
                    required: true,
                    message: "请输入主要负责人",
                    trigger: "blur"
                  }],
                },
                {
                  label: "主要负责人固定电话",
                  prop: "zyfzrgddh",
                  align: "center",
                  maxlength:50,
                  rules: [{
                    required: false,
                    validator: validateTelephone,
                    trigger: "blur"
                  }],
                },
                {
                  label: "主要负责人移动电话",
                  prop: "zyfzryddh",
                  align: "center",
                  maxlength:50,
                  rules: [{
                    required: false,
                    validator: validateTelephone,
                    trigger: "blur"
                  }],
                },
                {
                  label: "主要负责人电子邮箱",
                  prop: "zyfzrdzyx",
                  align: "center",
                  maxlength:50,
                  rules: [{
                    required: false,
                    validator: validateEmail,
                    trigger: "blur"
                  }],
                },
                {
                  label: "安全负责人",
                  prop: "aqfzr",
                  align: "center",
                  maxlength:50,
                  rules: [{
                    required: false,
                    message: "请输入安全负责人",
                    trigger: "blur"
                  }],
                },
                {
                  label: "安全负责人固定电话",
                  prop: "aqfzrgddh",
                  align: "center",
                  maxlength:50,
                  rules: [{
                    required: false,
                    validator: validateTelephone,
                    trigger: "blur"
                  }],
                },
                {
                  label: "安全负责人移动电话",
                  prop: "aqfzryddh",
                  align: "center",
                  maxlength:50,
                  rules: [{
                    required: false,
                    validator: validateTelephone,
                    trigger: "blur"
                  }],
                },
                {
                  label: "安全负责人电子邮箱",
                  prop: "aqfzrdzyx",
                  align: "center",
                  maxlength:50,
                  rules: [{
                    required: false,
                    validator: validateEmail,
                    trigger: "blur"
                  }],
                },
                {
                  label: '经济类型大类',
                  prop: 'jjlxdl',
                  align: "center",
                  type: 'tree',
                  cascaderIndex:0,
                  props: {
                    label: 'dictValue',
                    value: 'dictKey'
                  },
                  cascaderItem: ['jjlxxl'],
                  dicUrl: "/api/blade-system/dict-biz/dictionary?code=deptInfo_jjlxdl",
                  rules: [{
                    required: true,
                    message: "请选择经济类型大类",
                    trigger: "blur"
                  }]
                },
                {
                  label: '经济类型小类',
                  prop: 'jjlxxl',
                  align: "center",
                  type: 'tree',
                  cascaderIndex:0,
                  props: {
                    label: 'dictValue',
                    value: 'dictKey'
                  },
                  dicFlag: false,
                  dicUrl: "/api/deptInfoManage/bladeDeptInfo/getJjlxxl?jjlxdlBm={{key}}",
                  rules: [{
                    required: true,
                    message: "请选择经济类型小类",
                    trigger: "blur"
                  }]
                },
                {
                  label: '行业类别门类',
                  prop: 'hylbml',
                  align: "center",
                  type: 'tree',
                  cascaderIndex:0,
                  props: {
                    label: 'dictValue',
                    value: 'dictKey'
                  },
                  cascaderItem: ['hylbdl', 'hylbzl', 'hylbxl'],
                  dicUrl: "/api/blade-system/dict-biz/dictionary?code=deptInfo_hylbml",
                  rules: [{
                    required: true,
                    message: "请选择行业类别门类",
                    trigger: "blur"
                  }]
                },
                {
                  label: '行业类别大类',
                  prop: 'hylbdl',
                  align: "center",
                  type: 'tree',
                  cascaderIndex:0,
                  props: {
                    label: 'dictValue',
                    value: 'dictKey'
                  },
                  dicFlag: false,
                  dicUrl: "/api/deptInfoManage/bladeDeptInfo/getHylbdl?hylbmlBm={{key}}",
                  rules: [{
                    required: true,
                    message: "请选择行业类别大类",
                    trigger: "blur"
                  }]
                },
                {
                  label: '行业类别中类',
                  prop: 'hylbzl',
                  align: "center",
                  type: 'tree',
                  cascaderIndex:0,
                  props: {
                    label: 'dictValue',
                    value: 'dictKey'
                  },
                  dicFlag: false,
                  dicUrl: "/api/deptInfoManage/bladeDeptInfo/getHylbzl?hylbdlBm={{key}}",
                  rules: [{
                    required: true,
                    message: "请选择行业类别中类",
                    trigger: "blur"
                  }]
                },
                {
                  label: '行业类别小类',
                  prop: 'hylbxl',
                  align: "center",
                  type: 'tree',
                  cascaderIndex:0,
                  props: {
                    label: 'dictValue',
                    value: 'dictKey'
                  },
                  dicFlag: false,
                  dicUrl: "/api/deptInfoManage/bladeDeptInfo/getHylbxl?hylbzlBm={{key}}",
                  rules: [{
                    required: true,
                    message: "请选择行业类别小类",
                    trigger: "blur"
                  }]
                },
                {
                  label: '行业监管大类',
                  prop: 'hyjgdl',
                  align: "center",
                  type: 'tree',
                  cascaderIndex:0,
                  props: {
                    label: 'dictValue',
                    value: 'dictKey'
                  },
                  cascaderItem: ['hyjgxl'],
                  dicUrl: "/api/blade-system/dict-biz/dictionary?code=deptInfo_hyjgdl",
                  rules: [{
                    required: true,
                    message: "请选择行业监管大类",
                    trigger: "blur"
                  }]
                },
                {
                  label: '行业监管小类',
                  prop: 'hyjgxl',
                  align: "center",
                  type: 'tree',
                  cascaderIndex:0,
                  props: {
                    label: 'dictValue',
                    value: 'dictKey'
                  },
                  dicFlag: false,
                  dicUrl: "/api/deptInfoManage/bladeDeptInfo/getHyjgxl?hyjgdlBm={{key}}",
                  rules: [{
                    required: true,
                    message: "请选择行业监管小类",
                    trigger: "blur"
                  }]
                },
                {
                  label: "专项治理类别",
                  type: "select",
                  align: "center",
                  dicUrl: "/api/blade-system/dict-biz/dictionary?code=deptInfo_zxzllb",
                  props: {
                    label: "dictValue",
                    value: "dictKey"
                  },
                  slot: true,
                  prop: "zxzllb",
                  rules: [{
                    required: true,
                    message: "请选择专项治理类别",
                    trigger: "blur"
                  }]
                },
                {
                  label: "是否为国有企业",
                  type: "select",
                  align: "center",
                  dicUrl: "/api/blade-system/dict-biz/dictionary?code=deptInfo_yesno",
                  props: {
                    label: "dictValue",
                    value: "dictKey"
                  },
                  dataType: "number",
                  slot: true,
                  prop: "sfwgyqy",
                  rules: [{
                    required: true,
                    message: "请选择是否为国有企业",
                    trigger: "blur"
                  }]
                },
                {
                  label: "隶属关系",
                  type: "select",
                  align: "center",
                  dicUrl: "/api/blade-system/dict-biz/dictionary?code=deptInfo_lsgx",
                  props: {
                    label: "dictValue",
                    value: "dictKey"
                  },
                  slot: true,
                  prop: "lsgx",
                  rules: [{
                    required: true,
                    message: "请选择隶属关系",
                    trigger: "blur"
                  }]
                },
                {
                  label: "经营范围",
                  prop: "jyfw",
                  align: "center",
                  maxlength:1000,
                  rules: [{
                    required: false,
                    message: "请输入经营范围",
                    trigger: "blur"
                  }],
                },
                {
                  label: "经营状态",
                  type: "select",
                  align: "center",
                  dicUrl: "/api/blade-system/dict-biz/dictionary?code=deptInfo_jyzt",
                  props: {
                    label: "dictValue",
                    value: "dictKey"
                  },
                  slot: true,
                  prop: "jyzt",
                  rules: [{
                    required: true,
                    message: "请选择经营状态",
                    trigger: "blur"
                  }]
                },
                {
                  label: "注册资金（万元）",
                  prop: "zczj",
                  align: "center",
                  maxlength:10,
                  rules: [{
                    required: false,
                    validator: validateDigitPoint,
                    trigger: "blur"
                  }],
                },
                {
                  label: "占地面试",
                  prop: "zdmj",
                  align: "center",
                  maxlength:10,
                  rules: [{
                    required: false,
                    validator: validateDigitPoint,
                    trigger: "blur"
                  }],
                },
                {
                  label: "从业人员数量",
                  prop: "cyrysl",
                  align: "center",
                  maxlength:8,
                  rules: [{
                    required: false,
                    validator: validateDigit,
                    trigger: "blur"
                  }],
                },
                {
                  label: "特种作业人员数量",
                  prop: "tzzyrysl",
                  align: "center",
                  maxlength:8,
                  rules: [{
                    required: true,
                    validator: validateDigit,
                    trigger: "blur"
                  }],
                },
                {
                  label: "专职安全生产管理人员数量",
                  prop: "zzaqscglry",
                  align: "center",
                  maxlength:8,
                  rules: [{
                    required: true,
                    validator: validateDigit,
                    trigger: "blur"
                  }],
                },
                {
                  label: "兼职安全生产管理人员数量",
                  prop: "jzaqscglry",
                  align: "center",
                  maxlength:8,
                  rules: [{
                    required: true,
                    validator: validateDigit,
                    trigger: "blur"
                  }],
                },
                {
                  label: "专职应急管理人员数量",
                  prop: "zzyjglry",
                  align: "center",
                  maxlength:8,
                  rules: [{
                    required: true,
                    validator: validateDigit,
                    trigger: "blur"
                  }],
                },
                {
                  label: "注册安全工程师人员数量",
                  prop: "zcaqgcsrs",
                  align: "center",
                  maxlength:8,
                  rules: [{
                    required: true,
                    validator: validateDigit,
                    trigger: "blur"
                  }],
                },
                {
                  label: "是否有专门安全机构",
                  type: "select",
                  align: "center",
                  dicUrl: "/api/blade-system/dict-biz/dictionary?code=deptInfo_yesno",
                  props: {
                    label: "dictValue",
                    value: "dictKey"
                  },
                  dataType: "number",
                  slot: true,
                  prop: "sfyzmaqjg",
                  rules: [{
                    required: true,
                    message: "请选择是否有专门安全机构",
                    trigger: "blur"
                  }]
                },
                {
                  label: "安全管理机构名称",
                  prop: "aqgljgmc",
                  align: "center",
                  maxlength: 150,
                  rules: [{
                    required: false,
                    message: "请输入安全管理机构名称",
                    trigger: "blur"
                  }],
                },
                {
                  label: "安全管理机构职责",
                  prop: "aqgljgzz",
                  align: "center",
                  maxlength: 500,
                  rules: [{
                    required: false,
                    message: "请输入安全管理机构职责",
                    trigger: "blur"
                  }],
                },
                {
                  label: "安全管理机构成员数量",
                  prop: "aagljgcysl",
                  align: "center",
                  maxlength: 8,
                  rules: [{
                    required: false,
                    validator: validateDigit,
                    trigger: "blur"
                  }],
                },
                {
                  label: "是否有专职安全人员",
                  type: "select",
                  align: "center",
                  dicUrl: "/api/blade-system/dict-biz/dictionary?code=deptInfo_yesno",
                  props: {
                    label: "dictValue",
                    value: "dictKey"
                  },
                  dataType: "number",
                  slot: true,
                  prop: "sfyzzaqry",
                  rules: [{
                    required: true,
                    message: "请选择是否有专职安全人员",
                    trigger: "blur"
                  }]
                },
                {
                  label: "规模情况",
                  type: "select",
                  align: "center",
                  dicUrl: "/api/blade-system/dict-biz/dictionary?code=deptInfo_gmqk",
                  props: {
                    label: "dictValue",
                    value: "dictKey"
                  },
                  slot: true,
                  prop: "gmqk",
                  rules: [{
                    required: true,
                    message: "请选择规模情况",
                    trigger: "blur"
                  }]
                },
                {
                  label: "企业规模",
                  type: "select",
                  align: "center",
                  dicUrl: "/api/blade-system/dict-biz/dictionary?code=deptInfo_gygm",
                  props: {
                    label: "dictValue",
                    value: "dictKey"
                  },
                  slot: true,
                  prop: "gygm",
                  rules: [{
                    required: true,
                    message: "请选择企业规模",
                    trigger: "blur"
                  }]
                },
                {
                  label: "是否有母公司",
                  type: "select",
                  align: "center",
                  dicUrl: "/api/blade-system/dict-biz/dictionary?code=deptInfo_yesno",
                  props: {
                    label: "dictValue",
                    value: "dictKey"
                  },
                  dataType: "number",
                  slot: true,
                  prop: "sfymgs",
                  rules: [{
                    required: true,
                    message: "请选择是否有母公司",
                    trigger: "blur"
                  }]
                },
                {
                  label: "母公司名称",
                  prop: "mgsmc",
                  align: "center",
                  maxlength: 150,
                  rules: [{
                    required: false,
                    message: "请输入母公司名称",
                    trigger: "blur"
                  }],
                },
                {
                  label: "集团公司名称",
                  prop: "jtgsmc",
                  align: "center",
                  maxlength: 150,
                  rules: [{
                    required: false,
                    message: "请输入集团公司名称",
                    trigger: "blur"
                  }],
                },
                {
                  label: "安全标准化等级",
                  type: "select",
                  align: "center",
                  dicUrl: "/api/blade-system/dict-biz/dictionary?code=deptInfo_bzhdj",
                  props: {
                    label: "dictValue",
                    value: "dictKey"
                  },
                  slot: true,
                  prop: "bzhdj",
                  rules: [{
                    required: true,
                    message: "请选择安全标准化等级",
                    trigger: "blur"
                  }]
                },
                {
                  label: "标准化证书有效期起始日期",
                  prop: "bzhzsyxqqsrq",
                  align: "center",
                  type: "date",
                  format: "yyyy-MM-dd",
                  valueFormat: "yyyy-MM-dd",
                  rules: [{
                    required: true,
                    message: "请输入标准化证书有效期起始日期",
                    trigger: "click"
                  }]
                },
                {
                  label: "标准化证书有效期终止日期",
                  prop: "bzhzsyxqzzrq",
                  align: "center",
                  type: "date",
                  format: "yyyy-MM-dd",
                  valueFormat: "yyyy-MM-dd",
                  rules: [{
                    required: true,
                    message: "请输入标准化证书有效期终止日期",
                    trigger: "click"
                  }]
                },
                {
                  label: "安全监管等级",
                  prop: "aqjgdj",
                  align: "center",
                  maxlength: 10,
                  rules: [{
                    required: true,
                    message: "请输入安全监管等级",
                    trigger: "blur"
                  }],
                },
                {
                  label: "是否存在重大危险源",
                  type: "select",
                  align: "center",
                  dicUrl: "/api/blade-system/dict-biz/dictionary?code=deptInfo_yesno",
                  props: {
                    label: "dictValue",
                    value: "dictKey"
                  },
                  dataType: "number",
                  slot: true,
                  prop: "sfczzdwxy",
                  rules: [{
                    required: true,
                    message: "请选择是否存在重大危险源",
                    trigger: "blur"
                  }]
                },
                {
                  label: "重大危险源最高等级",
                  type: "select",
                  align: "center",
                  span:12,
                  dicUrl: "/api/blade-system/dict-biz/dictionary?code=deptInfo_zdwxyzgdj",
                  props: {
                    label: "dictValue",
                    value: "dictKey"
                  },
                  slot: true,
                  prop: "zdwxyzgdj",
                  rules: [{
                    required: true,
                    message: "请选择重大危险源最高等级",
                    trigger: "blur"
                  }]
                },
                {
                  label: "企业平面图",
                  prop: "qypmt",
                  align: "center",
                  slot: true,
                  span: 24,
                  width: 80,
                  formslot: true,
                },
                {
                  label: "",
                  prop: "qypmtContent",
                  hide: true,
                  span: 24,
                  formslot: true
                },
                {
                  label: "企业营业执照",
                  prop: "qyyyzz",
                  align: "center",
                  slot: true,
                  span: 24,
                  width: 80,
                  formslot: true,
                },
                {
                  label: "",
                  prop: "qyyyzzContent",
                  hide: true,
                  span: 24,
                  formslot: true
                },
                {
                  label: "企业大门照片",
                  prop: "qyzp",
                  align: "center",
                  slot: true,
                  span: 24,
                  width: 80,
                  formslot: true,
                },
                {
                  label: "",
                  prop: "qyzpContent",
                  hide: true,
                  span: 24,
                  formslot: true
                },
                {
                  label: '',
                  prop: 'deptMap',
                  span: 24,
                  hide: true,
                  formslot: true,
                },
                {
                  label: "经度",
                  prop: "jd",
                  align: "center",
                  readonly:true,
                  span:12,
                  rules: [{
                    required: true,
                    message: "请输入经度",
                    trigger: "blur"
                  }],
                },
                {
                  label: "纬度",
                  prop: "wd",
                  align: "center",
                  readonly:true,
                  span:12,
                  rules: [{
                    required: true,
                    message: "请输入纬度",
                    trigger: "blur"
                  }],
                },
                {
                  label: "备注",
                  prop: "bz",
                  align: "center",
                  type: "textarea",
                  maxlength:127,
                  span: 24,
                  minRows: 6,
                  hide: true,
                },
              ]
            }
          ]
        },
        mapPosition: {
          lng: 121.4472540000,
          lat: 31.3236200000
        },
        center: {
          lng: 121.4472540000,
          lat: 31.3236200000
        },

        zoom: 10,
        dragging: false,
        deptShowMap: true,
        searchWord: "",
        // 企业平面图
        qypmtFileList: [],
        // 企业营业执照
        qyyyzzFileList: [],
        // 企业大门照片
        qyzpFileList: []
      };
    },
    watch: {
      // 表单经度
      'form.jd' (val) {
        if(val) {
          this.mapPosition.lng = val / 1
        }
      },
      // 表单纬度
      'form.wd' (val) {
        if(val) {
          this.mapPosition.lat = val / 1
        }
      },
      localPicBox() {
        if(this.localPicBox === true) {
          this.initData();
        }
      }
    },
    created() {
      getCurrentDeptInfo().then(res => {
        this.form = res.data.data;
      }).then(() => {
        this.getPictureList();
      });
    },
    methods: {
      // 初始化图片
      initData() {
        this.imgList = [];
        this.localPictures.forEach(item => {
          this.imgList.push({url: item.fileUrl});
        });
      },

      getPictureList() {
        this.qypmtFileList = [];
        this.qyyyzzFileList = [];
        this.qyzpFileList = [];
        getPictures(1).then((data) => {
          if (data.data.data[0] !== "") {
            data.data.data.forEach(item => {
              this.qypmtFileList.push({
                name: item.bladeFiles[0].fileName,
                response: {
                  code: 200,
                  data: item.bladeFiles[0],
                  msg: "操作成功",
                  success: true
                }
              });
            })
          }
        });
        getPictures(2).then((data) => {
          if (data.data.data[0] !== "") {
            data.data.data.forEach(item => {
              this.qyyyzzFileList.push({
                name: item.bladeFiles[0].fileName,
                response: {
                  code: 200,
                  data: item.bladeFiles[0],
                  msg: "操作成功",
                  success: true
                }
              });
            })
          }
        });
        getPictures(3).then((data) => {
          if (data.data.data[0] !== "") {
            data.data.data.forEach(item => {
              this.qyzpFileList.push({
                name: item.bladeFiles[0].fileName,
                response: {
                  code: 200,
                  data: item.bladeFiles[0],
                  msg: "操作成功",
                  success: true
                }
              });
            })
          }
        });
      },
      // 地图处理事件
      deptInfoHandler({BMap, map}) {
        let _this = this;
        map.addEventListener('click', function(e) {
          _this.form.jd = e.point.lng
          _this.form.wd = e.point.lat
        });
        _this.$nextTick(() => {
          document.getElementById('citySearch').addEventListener('click', function() {
            let localSearch = new BMap.LocalSearch(map)
            localSearch.setSearchCompleteCallback(searchResult => {
              let poi = searchResult.getPoi(0)
              if(!poi) {
                return _this.$message.warning('该地址不存在')
              } else {
                _this.center = {
                  lng: poi.point.lng,
                  lat: poi.point.lat
                }
                _this.form.jd = poi.point.lng
                _this.form.wd = poi.point.lat
              }
            });
            localSearch.search(_this.searchWord);
          });
        })
      },

      /**
       * 上传企业平面图
       */
      qypmtUpload(element) {
        console.log(element);
        if(this.$refs.qypmtUpload.files.length + this.qypmtFileList.length > 3) {
          this.$message.warning("最多上传3张现场图片!");
          this.$refs.qypmtUpload.value = null;
          return;
        }
        let formData = {};
        let files = this.$refs.qypmtUpload.files;
        formData = new FormData();
        for(let i = 0 ; i < files.length ; i++) {
          formData.append("files", files[i]);
        }
        uploadFiles(formData).then(res => {
          if(!res.data.success) {
            return;
          }
          const resData = res.data.data;
          resData.forEach(item => {
            this.qypmtFileList.push({
              name: item.fileName,
              response: {
                code: 200,
                msg: "操作成功",
                success: true,
                data: item
              }
            });
          });
          this.$refs.qypmtUpload.value = null;
        });
      },
      // 点击上传图片按钮
      uploadQYPMT() {
        document.getElementById("qypmtUpload").click();
      },
      // 删除图片
      handleRemoveQYPMT(index) {
        this.qypmtFileList.splice(index, 1);
      },
      // 点击图片列表中已上传的企业平面图
      previewQYPMT(file) {
        if(file.response && file.response.code === 200 && file.response.data && file.response.data.fileUrl) {
          this.localPictures = [file.response.data];
          this.localPicBox = true;
        }
      },

      /**
       * 上传企业营业执照
       */
      qyyyzzUpload(element) {
        console.log(element);
        if(this.$refs.qyyyzzUpload.files.length + this.qyyyzzFileList.length > 3) {
          this.$message.warning("最多上传3张现场图片!");
          this.$refs.qyyyzzUpload.value = null;
          return;
        }
        let formData = {};
        let files = this.$refs.qyyyzzUpload.files;
        formData = new FormData();
        for(let i = 0 ; i < files.length ; i++) {
          formData.append("files", files[i]);
        }
        uploadFiles(formData).then(res => {
          if(!res.data.success) {
            return;
          }
          const resData = res.data.data;
          resData.forEach(item => {
            this.qyyyzzFileList.push({
              name: item.fileName,
              response: {
                code: 200,
                msg: "操作成功",
                success: true,
                data: item
              }
            });
          });
          this.$refs.qyyyzzUpload.value = null;
        });
      },
      // 点击上传图片按钮
      uploadQYYYZZ() {
        document.getElementById("qyyyzzUpload").click();
      },
      // 删除图片
      handleRemoveQYYYZZ(index) {
        this.qyyyzzFileList.splice(index, 1);
      },
      // 点击图片列表中已上传的图片
      previewQYYYZZ(file) {
        if(file.response && file.response.code === 200 && file.response.data && file.response.data.fileUrl) {
          this.localPictures = [file.response.data];
          this.localPicBox = true;
        }
      },

      /**
       * 上传企业营业执照
       */
      qyzpUpload(element) {
        console.log(element);
        if(this.$refs.qyzpUpload.files.length + this.qyzpFileList.length > 3) {
          this.$message.warning("最多上传3张现场图片!");
          this.$refs.qyzpUpload.value = null;
          return;
        }
        let formData = {};
        let files = this.$refs.qyzpUpload.files;
        formData = new FormData();
        for(let i = 0 ; i < files.length ; i++) {
          formData.append("files", files[i]);
        }
        uploadFiles(formData).then(res => {
          if(!res.data.success) {
            return;
          }
          const resData = res.data.data;
          resData.forEach(item => {
            this.qyzpFileList.push({
              name: item.fileName,
              response: {
                code: 200,
                msg: "操作成功",
                success: true,
                data: item
              }
            });
          });
          this.$refs.qyzpUpload.value = null;
        });
      },
      // 点击上传图片按钮
      uploadQYZP() {
        document.getElementById("qyzpUpload").click();
      },
      // 删除照片
      handleRemoveQYZP(index) {
        this.qyzpFileList.splice(index, 1);
      },
      // 点击图片列表中已上传的图片
      previewQYZP(file) {
        if(file.response && file.response.code === 200 && file.response.data && file.response.data.fileUrl) {
          this.localPictures = [file.response.data];
          this.localPicBox = true;
        }
      },

      // 确认图片
      confirmViewPicture() {
        this.localPictures = [];
        this.localPicBox = false;
        this.$emit('confirmViewPicture');
      },

      // 关闭弹窗
      handleClosePicBox(done) {
        done();
        this.$emit('handleClosePicBox');
      },

      // 获取现场图片ids
      formatPictureIds(filelist) {
        const ids = [];
        filelist.forEach(item => {
          ids.push(item.response.data.id);
        });
        return ids.join(",");
      },

      //提交信息
      handleSubmit(form, done, loading) {
        form.qypmt = this.qypmtFileList.length === 0 ? "" : this.formatPictureIds(this.qypmtFileList);
        form.qyyyzz = this.qyyyzzFileList.length === 0 ? "" : this.formatPictureIds(this.qyyyzzFileList);
        form.qyzp = this.qyzpFileList.length === 0 ? "" : this.formatPictureIds(this.qyzpFileList);
        submit(form).then(() => {
          this.$message({
            type: "success",
            message: "提交成功!"
          });
          done();
        }, error => {
          loading();
          window.console.log(error);
        });
      }
    }
  };
</script>

<style lang="scss" scpoed>
  .map {
    width: 100%;
    height: 500px;
  }

  .xczp_content {
    width: 100%;
    height: 118px;
    line-height: 105px;
    border: 1px solid #DCDFE6;
    border-radius: 4px;

    .el-tag {
      height: 100px;
      line-height: 100px;
      padding: 0px 10px 0px 0px;
      margin-left: 10px;
      margin-top: 10px;

      .el-icon-close {
        top: -84px;
      }
    }

    img {
      width: 98px;
      height: 98px;
      cursor: pointer;
    }
  }

  .el-carousel {
    .el-carousel__container {
      height: 500px;
      text-align: center;

      img {
        height: 100%;
      }
    }
  }

</style>
